<template>
  <div class="root">
    <div class="leftBox">
      <div class="headerBox">
        <img src="@/static/Imgs/userImg/icon.png" class="imgBox" alt="" />
        数据概要
      </div>
      <div class="listBox">
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="nameBox">{{ item.name }}</div>
          <div class="numBox">{{ item.num }}</div>
        </div>
      </div>
      <div class="headerBox">
        <img src="@/static/Imgs/userImg/xingxing.png" class="imgBox" alt="" />
        新品推送
      </div>
      <div class="goodsList">
        <div class="goods" @click="$router.push({
          path:'/detail',
          query:{
            id:item.id
          }
        })" v-for="(item, index) in tableData" :key="index">
          <div>
            <img :src="item.pictureOriginal" class="newImg" alt="" />
          </div>
          <div class="titleBox">{{ item.specification }}</div>
          <div class="bottomBox">
            <div class="PriceBox">￥{{ item.price }}</div>
            <div class="brandBox">
              <img
                src="@/static/popularityimgs/shoplog.png"
                alt=""
                class="newImg"
              />
              {{ item.storeName }}
            </div>
          </div>
        </div>
      </div>
      <div class="pagingBox">
        <PaginationView :total="total" @change="getPage"></PaginationView>
      </div>
    </div>
    <PersonalInformation :userData="userData"></PersonalInformation>
  </div>
</template>

<script>
import { personalCenter } from "@/api/BuyerCenter";
import { getUserData } from "@/api/user";
import PersonalInformation from "./components/PersonalInformation.vue";
import { selectAllByParams } from "@/api/seller/cangpushop";
export default {
  components: { PersonalInformation },
  data() {
    return {
      total:0,
      activeName: "所有订单",
      list: [
        {
          name: "下载记录",
          num: 0,
        },
        {
          name: "购物车",
          num: 0,
        },
        {
          name: "待付款订单",
          num: 0,
        },
        {
          name: "待发货订单",
          num: 0,
        },
        {
          name: "已发货订单",
          num: 0,
        },
        {
          name: "已完成订单",
          num: 0,
        },
        {
          name: "售后处理中",
          num: 0,
        },
        {
          name: "售后已完成",
          num: 0,
        },
      ],
      userData: {},
      form: {
        pageNumber: 1,
        pageSize: 10,
        categoryId: "",
        market: "",
        priceRange: "",
        attributes: [],
        lookingFor: "",
        channelId: "",
        orderBy: "",
        type:'new'
      },
      tableData: [],
    };
  },
  created() {
    this.personalCenter();
    this.getUserData();
    this.selectAllByParams();
  },
  methods: {
    getPage(val) {
      this.form.pageNumber = val.currentPage;
      this.form.pageSize = val.limit;
      this.selectAllByParams();
    },
    //获取推荐商品
    selectAllByParams() {
      selectAllByParams(this.form).then((data) => {
        this.tableData = data.data.records;
        this.total=data.data.total
      });
    },
    // 获取个人信息
    getUserData() {
      getUserData().then((data) => {
        this.userData = data.data;
      });
    },
    //获取数据概要
    personalCenter() {
      personalCenter().then((data) => {
        this.list[6].num = data.data.afterSaleNumber;
        this.list[1].num = data.data.cartItemNumber;
        this.list[7].num = data.data.completedAfterSaleNumber;
        this.list[5].num = data.data.completedOrderNumber;
        this.list[4].num = data.data.deliveredOrderNumber;
        this.list[0].num = data.data.downloadHistoryNumber;
        this.list[3].num = data.data.waitDeliverOrderNumber;
        this.list[2].num = data.data.waitPayOrderNumber;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.root {
  display: flex;
  .leftBox {
    width: 60vw;
    .headerBox {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      .imgBox {
        width: 50px;
        height: 50px;
      }
    }
    .listBox {
      display: flex;
      flex-wrap: wrap;
      .list {
        width: 20%;
        padding: 1vw;
        background: #f5f7f9;
        margin-bottom: 1vw;
        margin-right: 1vw;
        border-radius: 12px;
        .nameBox {
          font-size: 12px;
          color: #666666;
          margin-bottom: 10px;
        }
        .numBox {
          font-size: 20px;
          color: #333333;
          font-weight: 700;
        }
      }
    }
    .goodsList {
      display: flex;
      flex-wrap: wrap;
      font-size: 12px;
      .goods {
        cursor:pointer;
        width: 10vw;
        margin-right: 1vw;
        margin-bottom: 1vw;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        padding: 0.43vw;
        padding-bottom: 15px;
        .newImg {
          width: 10vw;
          height: 10vw;
        }
        .titleBox {
          font-size: 12px;
          margin-top: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 80%;
        }
        .bottomBox {
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
          .PriceBox {
            font-size: 12px;
            color: #e22a1f;
          }
          .brandBox {
            color: #999999;
            display: flex;
            align-items: center;
            .newImg {
              height: 0.11rem;
              width: 0.11rem;
              margin-right: 0.05rem;
              margin-top: 2px;
            }
          }
        }
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
